<template>
    <!--<nav-menu params="route: route"></nav-menu>-->
    <!--<transition :enter-to-class="enterAnim" :leave-to-class="leaveAnim">-->
        <router-view></router-view>
    <!--</transition>-->
</template>

<script>
    import Vue from 'vue'
    import Pull from './pull'
    import Product from './product'

    //Vue.component('home-page', HomePage);
    Vue.component('pull', Pull);
    Vue.component('product', Product);

    export default {
        data() {
            return {
                enterAnim: 'anim fadeIn',
                leaveAnim: 'anim fadeOut'
            }
        },
        watch: {
            '$route'(to, from) {
                const toDepth = to.path.split('/').length
                const fromDepth = from.path.split('/').length
                //if (toDepth < fromDepth) {
                //    this.enterAnim = "anim fadeInRight";
                //    this.leaveAnim = "anim fadeOutLeft";
                //}
                //else {
                //    this.enterAnim = "anim fadeInLeft";
                //    this.leaveAnim = "anim fadeOutRight";
                //}
            }
        }
    }
</script>

<style>
</style>
